<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
        <div class="flex items-center space-x-8">
          <h1 class="text-2xl font-bold text-blue-600">知识分享</h1>
          <div class="relative">
            <a-input-search
                v-model:value="searchText"
                placeholder="搜索文章"
                class="w-96"
                @search="onSearch"
            />
          </div>
        </div>
        <div class="flex items-center space-x-6">
          <a-button type="primary" class="!rounded-button" @click="onWrite">
            <template #icon><EditOutlined /></template>
            写文章
          </a-button>
          <a-badge :count="3">
            <BellOutlined class="text-xl cursor-pointer" />
          </a-badge>
          <a-avatar :size="40" :src="userAvatar" class="cursor-pointer" @click="goToProfile" />
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="max-w-7xl mx-auto pt-20 px-4 flex">
      <!-- 左侧边栏 -->
      <div class="w-60 flex-shrink-0">
        <div class="bg-white rounded-lg p-4 sticky top-20">
          <h3 class="text-lg font-medium mb-4">分类导航</h3>
          <div class="space-y-2">
            <div v-for="category in categories" :key="category.id"
                 class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
              <component :is="category.icon" class="text-lg mr-2" />
              <span>{{ category.name }}</span>
              <span class="ml-auto text-gray-400 text-sm">{{ category.count }}</span>
            </div>
          </div>

          <h3 class="text-lg font-medium mt-8 mb-4">热门标签</h3>
          <div class="flex flex-wrap gap-2">
            <a-tag v-for="tag in hotTags" :key="tag.id" :color="tag.color" class="cursor-pointer">
              {{ tag.name }}
            </a-tag>
          </div>
        </div>
      </div>

      <!-- 中间内容区 -->
      <div class="flex-1 mx-8">
        <a-tabs v-model:activeKey="activeTab">
          <a-tab-pane key="recommend" tab="推荐">
            <div class="space-y-6">
              <div v-for="article in articles" :key="article.id"
                   class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <div class="flex items-start">
                  <div class="flex-1">
                    <h2 class="text-xl font-medium mb-2 cursor-pointer hover:text-blue-600">
                      {{ article.title }}
                    </h2>
                    <p class="text-gray-600 line-clamp-2 mb-4">{{ article.summary }}</p>
                    <div class="flex items-center text-gray-400 text-sm">
                      <a-avatar :size="24" :src="article.authorAvatar" />
                      <span class="ml-2">{{ article.author }}</span>
                      <ClockCircleOutlined class="ml-4 mr-1" />
                      <span>{{ article.date }}</span>
                      <EyeOutlined class="ml-4 mr-1" />
                      <span>{{ article.views }}</span>
                      <LikeOutlined class="ml-4 mr-1" />
                      <span>{{ article.likes }}</span>
                    </div>
                  </div>
                  <img v-if="article.cover" :src="article.cover"
                       class="w-48 h-32 object-cover rounded-lg ml-4" />
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="latest" tab="最新">
            <!-- 最新文章列表 -->
          </a-tab-pane>
          <a-tab-pane key="following" tab="关注">
            <!-- 关注作者的文章列表 -->
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 右侧边栏 -->
      <div class="w-72 flex-shrink-0">
        <div class="bg-white rounded-lg p-4 sticky top-20">
          <h3 class="text-lg font-medium mb-4">推荐作者</h3>
          <div class="space-y-4">
            <div v-for="author in recommendAuthors" :key="author.id"
                 class="flex items-center">
              <a-avatar :size="40" :src="author.avatar" />
              <div class="ml-3 flex-1">
                <div class="font-medium">{{ author.name }}</div>
                <div class="text-sm text-gray-400">{{ author.description }}</div>
              </div>
              <a-button size="small" class="!rounded-button">关注</a-button>
            </div>
          </div>

          <h3 class="text-lg font-medium mt-8 mb-4">热门文章</h3>
          <div class="space-y-3">
            <div v-for="article in hotArticles" :key="article.id"
                 class="cursor-pointer hover:text-blue-600">
              <div class="line-clamp-2 text-sm">{{ article.title }}</div>
              <div class="text-gray-400 text-xs mt-1">{{ article.views }} 阅读</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  EditOutlined,
  BellOutlined,
  ClockCircleOutlined,
  EyeOutlined,
  LikeOutlined,
  CodeOutlined,
  ReadOutlined,
  ExperimentOutlined,
  RocketOutlined,
  CloudOutlined
} from '@ant-design/icons-vue';

const searchText = ref('');
const activeTab = ref('recommend');
const userAvatar = 'https://ai-public.mastergo.com/ai/img_res/58407095929ac3f49425c946e3a45726.jpg';

const categories = [
  { id: 1, name: '技术开发', icon: CodeOutlined, count: 2341 },
  { id: 2, name: '产品设计', icon: ExperimentOutlined, count: 1234 },
  { id: 3, name: '前端开发', icon: RocketOutlined, count: 3421 },
  { id: 4, name: '后端开发', icon: CloudOutlined, count: 2198 },
  { id: 5, name: '经验分享', icon: ReadOutlined, count: 1876 }
];

const hotTags = [
  { id: 1, name: 'Vue3', color: 'blue' },
  { id: 2, name: 'TypeScript', color: 'cyan' },
  { id: 3, name: 'React', color: 'purple' },
  { id: 4, name: '微服务', color: 'orange' },
  { id: 5, name: '设计模式', color: 'green' }
];

const articles = [
  {
    id: 1,
    title: '深入理解 Vue3 Composition API 和响应式原理',
    summary: '本文将详细介绍 Vue3 Composition API 的工作原理，以及响应式系统的底层实现。通过实例讲解，帮助你更好地理解和使用这一强大特性。',
    author: '陈思行',
    authorAvatar: 'https://ai-public.mastergo.com/ai/img_res/22153385ce1d466429ee77969c2b99c2.jpg',
    date: '2024-01-15',
    views: '12.5k',
    likes: 328,
    cover: 'https://ai-public.mastergo.com/ai/img_res/3425e669a4468c1791ea0625efceb4cf.jpg'
  },
  {
    id: 2,
    title: '微服务架构实践：从单体应用到分布式系统',
    summary: '分享一个大型项目从单体应用迁移到微服务架构的实践经验，包括技术选型、服务拆分策略、数据一致性等关键问题的解决方案。',
    author: '林雨晨',
    authorAvatar: 'https://ai-public.mastergo.com/ai/img_res/e6dda1c096b8778637764891094029a0.jpg',
    date: '2024-01-14',
    views: '8.9k',
    likes: 246,
    cover: 'https://ai-public.mastergo.com/ai/img_res/34b2188bb23b82e1a65f95f4ed6fdc43.jpg'
  }
];

const recommendAuthors = [
  {
    id: 1,
    name: '张云逸',
    description: '资深前端开发工程师',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/ac25900c5e6e0351280b7a2528620f33.jpg'
  },
  {
    id: 2,
    name: '王梓萱',
    description: '产品设计师',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/539f1132d2883a5f323d5070060cb022.jpg'
  }
];

const hotArticles = [
  {
    id: 1,
    title: '2024 年前端技术发展趋势与机遇',
    views: '15.2k'
  },
  {
    id: 2,
    title: '如何设计高可用的微服务架构',
    views: '12.8k'
  }
];

const onSearch = (value: string) => {
  console.log('search:', value);
};

const onWrite = () => {
  console.log('write article');
};

const goToProfile = () => {
  console.log('go to profile');
};
</script>

<style scoped>
.ant-input-search {
  font-size: 14px;
}

.ant-input-search .ant-input {
  padding-left: 12px;
  border-radius: 8px;
}

.ant-input-search .ant-input-search-button {
  border-radius: 0 8px 8px 0;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

